<template>
  <div :class="{'avue-contail-bg':isWel}">
    <div style="height:600px;position: absolute;
    top: 0;z-index: -1">
      <img class="avue-img"
           :src="bgImg"
           style="width:100%;height:100%" v-show="!isWel">
    </div>
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top />
      <div>
        <div class='f-c' style="
                  font-size: 30px;
                color: #fff;text-align: center;">
          <img class="avue-img"
               :src="`${publicPath}img/guohui.png`"
               style="width:40px;">
          <!-- <img class="avue-img"
               :src="`${publicPath}img/logo.png`"
               style="width:380px;margin-top: 20px;margin-bottom: 0px;"> -->
          <span class=' f-s-40 f-w-600 m-l-10 ' :class='$route.path.includes("wel/index")?"c-eee":"c-app"'>湖北省规划管理信息系统</span>
        </div>
      </div>
    </div>
    <div class="avue-layout">
      <div class="avue-main">
        <!-- 主体视图层 -->
        <div>
          <keep-alive>
            <router-view class="avue-view"
                         v-if="controlKeepAlive($route.meta.$keepAlive,$route.path)"/>
          </keep-alive>
          <router-view class="avue-view"
                       v-if="!controlKeepAlive($route.meta.$keepAlive,$route.path)"/>
        </div>
      </div>
    </div>
    <div class="avue-shade"
         @click="showCollapse"></div>
    <footerHtml />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import logo from "./logo";
import tags from "./tags";
import top from "./top/";
import footerHtml from "./footer";
import sidebar from "./sidebar/";
import admin from "@/util/admin";
import { validatenull } from "@/util/validate";
import { calcDate } from "@/util/date.js";
import { getStore } from "@/util/store.js";
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import store from "@/store";

export default {
  components: {
    logo,
    top,
    footerHtml,
    tags,
    sidebar
  },
  name: "index",
  data () {
    return {
      publicPath: process.env.BASE_URL,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      // bgImg:require("../../../public/img/bg/bgcommen.jpg"),
      bgImg:require("../../img/bg/bg_login.jpg"),
      
      isWel:true,
    };
  },
  created () {
    //实时检测刷新token
    this.refreshToken();
  },
  destroyed () {
    clearInterval(this.refreshTime);
  },
  mounted () {
    this.init();
  },
  computed: mapGetters([
    "userInfo",
    "isLock",
    "isCollapse",
    "website",
    "expires_in"
  ]),
  props: [],
  methods: {
    showCollapse () {
      this.$store.commit("SET_COLLAPSE");
    },
    // 屏幕检测
    init () {
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
    },
    // 实时检测刷新token
    refreshToken () {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "access_token",
          debug: true
        });

        if (validatenull(token)) {
          return;
        }

        if (this.expires_in <= 1000 && !this.refreshLock) {
          this.refreshLock = true;
          this.$store.dispatch("RefreshToken").catch(() => {
            clearInterval(this.refreshTime);
          });
          this.refreshLock = false;
        }
        this.$store.commit("SET_EXPIRES_IN", this.expires_in - 10);
      }, 10000);
    },
    // 搜索
    searchTo () {
      this.$router.push({ path: "/searchTo" });
    },
    controlKeepAlive(val,path){
      if(path=='/wel/index'){
        this.isWel = true
        // this.bgImg = require("../../../public/img/bg/bg.png")
      }else if(path!='/wel/index'){
        this.isWel = false
        // this.bgImg = require("../../../public/img/bg/bgcommen.jpg")
      }

      return val

    },
  }
};
</script>
<style lang="scss" scoped>
#btn {
  border-top-right-radius: 0.13rem;
  border-bottom-right-radius: 0.13rem;
  float: left;
  width: 70px;
  height: 42px;
  border: 0;
  outline: 0;
  cursor: pointer;
  background-color: #ec950a;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 600;
  border-top-right-radius: 0.31rem;
  border-bottom-right-radius: 0.31rem;
}

#key {
  border-top-left-radius: 0.13rem;
  border-bottom-left-radius: 0.13rem;
  float: left;
  width: 270px;
  height: 40px;
  border: 0;
  outline: 0;
  padding-left: 20px;
  line-height: 40px;
  text-indent: 1rem;
  border-top-left-radius: 0.31rem;
  border-bottom-left-radius: 0.31rem;
}


.avue-contail-bg{
  background: url("../../img/bg/bg_blue.png") no-repeat center center;
  background-size: 100% 100%;
}

.avue-contail-bg-commen{
  background: url("../../../public/img/bg/bgcommen.jpg");
  background-size:100% 600px
}
.table-hb {
      text-shadow: 0px 0px 2px #fff;
}
</style>

